import { Outlet } from "react-router-dom";
import QdTabbar from "./components/QdTabbar";
import styles from "./App.module.scss";
// import { useAppSelector, useAppDispatch } from "./hooks";
// import { selectCount, add } from "@/store/systemSlice";

// 不带Typescript的用法
// import { useSelector, useDispatch } from "react-redux";

// 没有Typescript的使用，直接用一下两个hooks就ok
// 获取值：useSelector
// 修改值: useDispatch

type Props = {};

export default function App({}: Props) {
  // 获取redux的值
  // const count = useAppSelector(selectCount);
  // 等价于
  // useAppSelector(function(state) {
  //   return state.system.count
  // })

  // 得到dispatch的实例函数
  // const dispatch = useAppDispatch();

  return (
    <div className={styles.qdapp}>
      {/* count: {count}
      <button
        onClick={() => {
          // dispatch({ type: "system/add", payload: "" });
          // 因为 add() 生成的是 { type: "system/add", payload: "" }
          dispatch(add());
        }}
      >
        加一
      </button> */}
      <Outlet></Outlet>
      <QdTabbar />
    </div>
  );
}
